@import "variables.styl"
@import "mixins.styl"

body,
html
  width 100%
  font-size 18px
  color gray-dark
  @extend .serif

p
  letter-spacing .1px
  line-height 1.8
  margin 20px 0
  a
    text-decoration underline

h1, h2, h3
  @extend .serif
  font-weight 800
  margin 32px 0 20px

h4, h5, h6
  @extend .serif
  font-weight 500
  margin 20px 0

a
  color red
  &:hover, &:focus
    color gray-dark
    text-decoration none
  &:visited, &:link
    color red
a img
  &:hover, &:focus
    cursor zoom-in

hr.small
  max-width 100px
  margin 20px auto
  border-width 4px
  border-color white

a.nav-back
  position absolute
  top 15px
  left 15px
  color white-faded
  z-index 99
  &:hover, &:focus
    color red

nav
  position absolute
  top 0
  left 0
  width 100%
  z-index 3
  @extend .serif

.intro 
  width 100%
  height 100%
  position relative
  margin: 80px auto 0
  
.intro-header
  background-color transparent
  background no-repeat center center
  background-attachment scroll
  background-size 100%
  @extend .background-cover
  margin-bottom 50px
  .site-heading, .post-heading, .page-heading
    padding 100px 0 20px
    color gray-dark
    &.archives
      color white-faded
      margin-top 60px
  .site-heading, .page-heading
    text-align center
    h1
      margin-top 0
      font-size 2em
      color red
    .subheading
      font-size 24px
      line-height 1.1
      display block
      @extend .serif
      font-weight 300
      margin 10px 0 0
    @media only screen and (min-width: 768px)
      h1
        font-size 2.2em
  .post-heading
    h1
      font-size 35px
    .subheading
      line-height 1.1
      display block
      @extend .serif
      font-size 24px
      margin 10px 0 30px
      font-weight 600

    @media only screen and (min-width: 768px)
      h1
        font-size 55px
      .subheading
        font-size 30px

.post-preview
  position relative
  padding 25px 0 35px
  min-height 14em
  overflow hidden
  clear both
  @extend .animation
  &.archive
    padding 12px 0
  p
    margin-left 36%
    padding-left .6em
    font-size 1.1em
    line-height 1.5
  blockquote
    margin-left 36%
    padding .7em
    margin-top 10px
    border none
    font-size 1em
    p 
      margin 0
      padding 0
  > a
    width 100%
    height 100%
    color gray-dark
    &:hover, &:focus
      text-decoration none
      > .post-title
        color red
    > .post-title
      float left
      width 32%
      height 100%
      font-size 2em
      margin 21px 0
      word-wrap break-word
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-line-clamp 2
      -webkit-box-orient vertical
      &.archive
        font-size 22px
        width 100%

  img 
    display: none

.section-heading
  font-size 36px
  margin-top 60px
  font-weight 700

.caption
  text-align center
  font-size 14px
  padding 10px
  font-style italic
  margin 0
  display block
  border-bottom-right-radius 5px
  border-bottom-left-radius 5px
  
.post-content
  padding-bottom 100px
  
.post-meta
  padding-top 50px

.post-tags, .post-categories, .post-date
  text-align right
  font-size 1em
  margin 10px 0
  a
    text-transform uppercase
    color red
    &:hover, &:visited, &:focus
      text-decoration none

.archive-before-pagination
  height 50px
  
.comment
  margin 20px 0 100px

footer
  padding 50px 0 65px
  color white-faded
  text-align center

.floating-label-form-group
  font-size 14px
  position relative
  margin-bottom 0
  padding-bottom 0.5em
  border-bottom 1px solid gray-light
  input, textarea
    z-index 1
    position relative
    padding-right 0
    padding-left 0
    border none
    border-radius 0
    font-size 1.5em
    background none
    box-shadow none !important
    resize none
  label
    display block
    z-index 0
    position relative
    top 2em
    margin 0
    font-size 0.85em
    line-height 1.764705882em
    vertical-align middle
    vertical-align baseline
    opacity 0
    -webkit-transition top 0.3s ease,opacity 0.3s ease
    -moz-transition top 0.3s ease,opacity 0.3s ease
    -ms-transition top 0.3s ease,opacity 0.3s ease
    transition top 0.3s ease,opacity 0.3s ease
  &::not(:first-child)
    padding-left 14px
    border-left 1px solid gray-light

.floating-label-form-group-with-value
  label
    top 0
    opacity 1

.floating-label-form-group-with-focus
  label
    color brand-primary

form .row:first-child .floating-label-form-group
  border-top 1px solid gray-light

.btn
  @extend .serif
  text-transform uppercase
  font-size 14px
  font-weight 800
  letter-spacing 1px
  border-radius 0
  padding 15px 25px

.btn-lg
  font-size 16px
  padding 25px 35px

.btn-default
  &:hover, &:focus
    background-color brand-primary
    border 1px solid brand-primary
    color white

.pagiantion
  display block
  padding 55px 0
  margin 0
  text-align center
  list-style none
  li
    display inline
    > a, > span
      @extend .serif
      text-transform uppercase
      font-size 14px
      font-weight 800
      letter-spacing 1px
      padding 15px 25px
      color white-faded
      border none
      border-radius none
    > a:hover, > a:focus
      text-decoration none
      color red
      background-color transparent
  .disabled
    > a, > a:hover, > a:focus, > span
      color gray
      cursor not-allowed

::-moz-selection
  color white
  text-shadow none
  background brand-primary

::selection
  color white
  text-shadow none
  background brand-primary

img::selection
  color white
  background transparent

img::-moz-selection
  color white
  background transparent

body
  webkit-tap-highlight-color brand-primary
